<template>
    <div class="login-body" >
        <div class="login-panel">
            <div class="login-title">欢迎登录 !</div>
            <div class="form-item-box">
                <input class="my-form-input" type="text"  maxlength="50" v-model="formData.username"  placeholder="请输入账号" />
                <div class="label-text user">账号</div>
            </div>
            <div class="form-item-box">
                <div class="label-text pwd">密码</div>
                <input class="my-form-input" ref="pwdInput" @blur="isShowPwd = false" :type="isShowPwd? 'text' :'password'"  maxlength="50" v-model="formData.password" placeholder="请输入密码"  />
                <div :class="`change-show-pwd-btn ${isShowPwd ? 'hide': 'show'}`" @click="changePwdShowState"></div>

            </div>
            <!-- <div class="form-item-box">
                <input class="my-form-input ver" type="text" @keyup.enter="login" maxlength="6" v-model="formData.verCode" placeholder="请输入验证码" />
                <div class="label-text ver"></div>
                <div class="get-ver-code-box" v-if="verCodeState.isSend">
                    {{ verCodeState.count }} 秒后获取
                </div>
                <div class="get-ver-code-box" v-else @click="startCount" v-loading="verCodeState.isGeting">
                    获取验证码
                </div>
            </div> -->

            <div class="form-item-box">
                <div class="submit-btn" @click="login" v-loading="isLoading">登录</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import useAppStore from '@/store/modules/app';
import { loginAPI, getVerCodeAPI } from '@/api';
import { ElMessage } from 'element-plus';
import { setToken } from '@/utils/token';
//表单
const formDataRef = ref();
const pwdInput = ref(null);
const isShowPwd = ref(false);
const isLoading = ref(false);
const changePwdShowState = () => {
    isShowPwd.value = !isShowPwd.value;
    pwdInput.value && pwdInput.value.focus()
}

const formData = reactive({
    username: "",
    password: "",
    verCode: "",
});

if (import.meta.env.DEV) {
    formData.username = 'szls_sps_@2024'
    formData.password = 'szlsSps_cd2024&'
}
        
const verCodeState = reactive({
    isSend: false,
    count: 60,
    isGeting: false,
    timer: null,
})

const startCount = async() => {
    const tel = formData.username;
    const pwd = formData.password;
    if (!tel) return ElMessage.warning('请输入账号');
    if (!pwd) return ElMessage.warning('请输入密码');
    verCodeState.isGeting = true;
    // if (!(/^1[3456789]\d{9}$/.test(tel))) return ElMessage.warning("手机号码有误，请重新输入");
    const res = await getVerCodeAPI({
        userName: tel,
        passWord: pwd,
    });
    verCodeState.isGeting = false;
    console.log('res', res)
    if (res && res.isResultTrue){
        ElMessage.success('发送成功')
        verCodeState.isSend = true;
        verCodeState.count = 60;
        loopCount()
    } else {
        ElMessage.warning(res.resultMsg)
    }
}

const loopCount = () => {
    if (verCodeState.timer) clearTimeout(verCodeState.timer);
    if (verCodeState.count<=0) {
        verCodeState.isSend = false;
        return 
    }
    verCodeState.timer = setTimeout(() => {
        verCodeState.count--;
        loopCount();
    }, 1000);
}

const login = async() => {
    if (isLoading.value) return;
    if (!formData.username) return ElMessage.warning('请输入账号')
    if (!formData.password) return ElMessage.warning('请输入密码')
    // if (!formData.verCode) return ElMessage.warning('请输入验证码')

    isLoading.value = true;
    const params = {
        // noteText: formData.verCode,
        userName: formData.username,
        passWord: formData.password
    }
    const res = await loginAPI(params)
    console.log('res', res)
    isLoading.value = false;
    if (res && res.isResultTrue) {
        // localStorage.setItem('login_state', 1)
        setToken(res.data.auth_token);
        useAppStore().setLoginStatus(true)
        useAppStore().setLoginParams(res.data);
        ElMessage.success('登录成功')
    }  else {
        ElMessage.warning(res.resultMsg)
    }
};
</script>

<style lang="scss" scoped>
.login-body {
    height: 100vh;
    width: 100vw;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    background: url(@/assets/images/login_bg.png) no-repeat center /cover;
    pointer-events: all;
    .login-panel {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 113px;
        width: 644px;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: .64);
        color: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;
        

        .login-title {
            font-size: 32px;
            height: 36px;
            line-height: 36px;
            margin-bottom: 48px;
            letter-spacing: 4px;
            font-family: PangMenZhengDao;

        }

        .form-item-box {
            width: 100%;
            height: 48px;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 20px;

            .submit-btn {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                letter-spacing: 4px;
                cursor: pointer;
                background: linear-gradient(to top, #DC191F, rgba($color: #FF0000, $alpha: .39));
            }

            .change-show-pwd-btn {
                display: none;
                position: absolute;
                cursor: pointer;
                right: 8px;
                top: 50%;
                transform: translate(0%, -50%);
                width: 34px;
                height: 34px;
                background: url(@/assets/images/ic_can_see.png) no-repeat center/20px 20px;

                &.show {
                    background-image: url(@/assets/images/ic_can_see.png)
                }
                &.hide {
                    background-image: url(@/assets/images/ic_cannot_see.png)
                }
            }

            .label-text {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 94px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                padding-left: 44px;
                font-size: 16px;
                white-space: nowrap;
                color: #FFE8F7;
                background: url(@/assets/images/ic_accout.png) no-repeat 16px center/22px 22px;
                &.pwd {
                    background-image: url(@/assets/images/ic_pwd.png);
                }
                &.ver {
                    width: 44px;
                    background-image: url(@/assets/images/ic_ver.png);
                    &::after {
                        display: none;
                    }
                }

                &::after {
                    content: "：";
                    font-family: initial;
                }
                
            }

            .get-ver-code-box {
                width: 133px;
                height: 48px;
                position: absolute;
                right: 0;
                top: 0;
                background-color: rgba($color: #FFC1E9, $alpha: .28);
                color: #FFE8F7;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap;
                cursor: pointer;
            }

            .my-form-input {
                width: 100%;
                height: 100%;
                background-color: transparent;
                border: 1px solid rgba($color: #FFC1E9, $alpha: .8);
                outline: none;
                color: #fff;
                box-sizing: border-box;
                padding-left: 94px;
                font-size: 16px;

                &:hover {
                    background-color: rgba($color: #FFC1E9, $alpha: .28);
                }

                
                &.ver {
                    padding-left: 44px;
                }
                &::placeholder {
                    color: #FFE8F7;
                }
            }

            .my-form-input:focus+.change-show-pwd-btn {
                    display: block;
                }

            input[type="password"]::-webkit-credentials-cramble-button{
                appearance: none;
            }

            input[type="password"]::-ms-reveal{
                display: none;
            }

            input[type="password"]::-ms-clear{
                display: none;
            }

            input[type="password"]{
                appearance: none;

            }

        }
    }
}
</style>